<template>
    <div class="app-container  photoRegisterDailog">
        <div class="main-container-content">
            <el-row :gutter="10">
                <div class="contentBoxs_form">
                    <el-col :xs='24' :sm="24" :md="24" :lg="24" :xl="24">
                        <!-- <el-form label-width="78px" class="demo-ruleForm contentBoxs_form_box"> -->
                        <div class=" contentBoxs_form_box">
                            <div class="photoRegisterDailog_title">
                                <div class="titleContent_left">
                                    <div class="titleContent_left_line"></div>
                                    <div class="titleContent_left_title">
                                        个案信息
                                    </div>
                                </div>
                                <i class="el-icon-close photoRegisterClose" @click="closeEvent"></i>
                            </div>
                            <!-- 头部信息 -->
                            <div class="topInfoDiv">
                                <div class="topInfoDiv-content">
                                    <el-row :gutter="10">
                                        <el-col :xs='24' :sm="12" :md="6" :lg="6" :xl="6">
                                            <div class="topInfoDiv-item">
                                                教学库编号：{{ teachInfo.teachingLibrariesNumber }}
                                            </div>
                                        </el-col>
                                        <el-col :xs='24' :sm="12" :md="6" :lg="6" :xl="6">
                                            <div class="topInfoDiv-item">
                                                教学库名称：{{ teachInfo.teachingLibrariesName }}
                                            </div>
                                        </el-col>
                                        <el-col :xs='24' :sm="12" :md="6" :lg="6" :xl="6">
                                            <div class="topInfoDiv-item">
                                                管理教师：{{ getUserName(teachInfo.users) }}
                                            </div>
                                        </el-col>
                                        <el-col :xs='24' :sm="12" :md="6" :lg="6" :xl="6">
                                            <div class="topInfoDiv-item">
                                                状态：已发布
                                            </div>
                                        </el-col>
                                    </el-row>
                                </div>
                                <div class="topInfoDiv-tabs">
                                    <el-row :gutter="10">
                                        <el-col :xs='24' :sm="24" :md="24" :lg="24" :xl="24">
                                            <el-tabs v-model="activeName" @tab-click="handleClick" class="tabsLine"
                                                :class="device === 'mobile' ? 'active' : ''">
                                                <el-tab-pane :label="listItem.name" :name="listItem.id"
                                                    v-for="(listItem, index) in tabsArr" :key="listItem.id">

                                                </el-tab-pane>

                                            </el-tabs>
                                        </el-col>
                                    </el-row>
                                </div>
                            </div>

                            <div class="contentDailog_contents active" v-if="!isLoading">
                                <!-- 基本信息 -->
                                <div class="contentDailog_contents_containers" v-if="tabsIndex == 0">
                                    <casesInfo @close="closeEvent" @submitForm="submitForm"
                                        :digitalSlicingData="digitalSlicingData" :diagnosisId="diagnosisId"
                                        :pathologyId="pathologyId"></casesInfo>
                                </div>
                                <!-- 大体标本 -->
                                <div class="contentDailog_contents_containers" v-if="tabsIndex == 1">
                                    <grossPecimen @close="closeEvent" @submitForm="submitForm" :diagnosisId="1"
                                        :data="grossSList">
                                    </grossPecimen>
                                </div>
                                <!-- 数字切片 -->
                                <div class="contentDailog_contents_containers" v-if="tabsIndex == 2">
                                    <digitalSlicing @close="closeEvent" @submitForm="submitForm"
                                        :digitalSlicingData="digitalSlicingData" :diagnosisId="diagnosisId"
                                        :pathologyId="pathologyId">
                                    </digitalSlicing>
                                </div>
                                <!-- 检验报告 -->
                                <div class="contentDailog_contents_containers" v-if="tabsIndex == 3">
                                    <standInspection @close="closeEvent" @submitForm="submitForm"
                                        :digitalSlicingData="digitalSlicingData" :diagnosisId="diagnosisId"
                                        :pathologyId="pathologyId">
                                    </standInspection>
                                </div>
                                <!-- 胃镜报告 -->
                                <div class="contentDailog_contents_containers" v-if="tabsIndex == 5">
                                    <gasReport @close="closeEvent" @submitForm="submitForm"
                                        :digitalSlicingData="digitalSlicingData" :diagnosisId="diagnosisId"
                                        :pathologyId="pathologyId">
                                    </gasReport>
                                </div>
                                <!--我的笔记 -->
                                <div class="contentDailog_contents_containers" v-if="tabsIndex == 7">
                                    <myNotes @close="closeEvent" @submitForm="submitForm">
                                    </myNotes>
                                </div>
                                <!-- 教师点评 -->
                                <div class="contentDailog_contents_containers" v-if="tabsIndex == 8">
                                    <teacherComment @close="closeEvent" @submitForm="submitForm">
                                    </teacherComment>
                                </div>



                            </div>
                        </div>
                        <!-- </el-form> -->

                    </el-col>
                </div>
            </el-row>

        </div>

    </div>
</template>
    
<script>
import casesInfo from './casesInfo.vue'// 基本信息
import grossPecimen from './grossPecimen.vue'//大体标本
import digitalSlicing from './digitalSlicing.vue'//数字切片
import standInspection from './standInspection.vue'//检查指标
import teacherComment from './teacherComment.vue'//教师点评
import myNotes from './myNotes.vue';//myNotes 我的笔记
import gasReport from './gasReport.vue';//myNotes 我的笔记
export default {
    name: "individualCases",
    dicts: [

    ],
    props: {
        detailType: {
            type: String,
            default: '1',//1  个案   2  病例详情
        },
        pathologyId: { //病例id
            type: [String, Number],
            default: '',
        },
        diagnosisId: { //诊断id
            type: [String, Number],
            default: '',
        },
        teachInfo: {
            type: Object,
            default: {},
        }

    },
    components: {
        casesInfo,
        grossPecimen,
        digitalSlicing,
        standInspection,
        teacherComment,
        myNotes,
        gasReport
    },
    data() {
        return {
            digitalSlicingData: {},//数字切片
            grossSList: [],
            tabsIndex: 0,
            activeName: '',
            isLoading: false,
            loginDialog: false,
            // 顾客选择弹窗
            // 省市区
            sexArray: [
                {
                    value: '0',
                    label: '女'
                }, {
                    value: '1',
                    label: '男'
                }
            ],
            tabsArr: [
                {
                    name: '基本信息',
                    id: "1"
                },
                {
                    name: '大体标本',
                    id: "2"
                },
                {
                    name: '数字切片',
                    id: "3"
                },
                {
                    name: '检验报告',
                    id: "4"
                },
                {
                    name: '检查报告',
                    id: "5"
                },
                {
                    name: '胃镜报告',
                    id: "6"
                },
                {
                    name: '电子病历',
                    id: "7"
                },
                {
                    name: this.detailType == 2 ? '学习笔记' : '我的笔记',
                    id: "8"
                },
                {
                    name: this.detailType == 2 ? '病例点评' : '教师点评',
                    id: "9"
                },
            ],


        };
    },
    computed: {
        device() {
            return this.$store.state.device
        }
    },
    async mounted() {
        this.activeName = '1'
        await this.diagnosisRequest();
    },
    methods: {
        getUserName(data) {
            let usersName = '';
            if (data) {
                data.forEach((item) => {
                    if (item.name == null) {
                    } else {
                        usersName = usersName + item.name + ' ';
                    }
                });
            }
            return usersName;
        },
        async diagnosisRequest() {
            this.isLoading = true;
            let pathologyId = this.pathologyId;
            let res = '';
            res = await this.$axios({
                method: 'GET',
                url: '/diagnosis/single',
                params: { pathologyId },
            });
            console.log('res', res);
            if (res && res.data.code !== 200) {
                this.$message.warning('未找到该诊断');
                this.isLoading = false;
            } else {

                const result = res.data.data;
                this.digitalSlicingData = result
                this.isLoading = false
            }

        },

        handleClick(tab, event) {
            console.log(tab.index)
            this.tabsIndex = tab.index

        },
        submitForm() {
            this.$emit('close')
        },
        closeEvent() {
            this.$emit('close')
        },
    }
};
</script>
    
<style scoped lang="scss">
.photoRegisterDailog {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    overflow: hidden;

    .photoRegisterDailog_title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;

    }
}

.contentDailog_contents_containers {
    height: 100%;
}

::v-deep {
    .tabsLine .el-icon-arrow-right:before {
        content: "\e6dc"
    }

    .tabsLine .el-icon-arrow-left:before {
        content: "\e6dd"
    }

    .tabsLine .el-tabs__item {
        box-shadow: none !important;
    }

    .el-tabs__nav-next,
    .el-tabs__nav-prev {
        font-size: 18px;
        line-height: 60px;
        color: #3a62d7;
    }

    .el-tabs__item {
        height: 60px;
        line-height: 60px;
    }

    .el-tabs__nav-scroll {
        overflow-x: auto;
    }

    .el-tabs__nav-scroll::-webkit-scrollbar {
        width: 8px;
        display: none !important;
    }

    .el-tabs__active-bar {
        height: 4px;
    }
}

::v-deep .tabsLine.active {
    .el-tabs__item {
        height: 50px !important;
        line-height: 50px !important;
    }

    .el-tabs__nav-scroll {
        overflow-x: auto !important;
    }

    .el-tabs__nav-next,
    .el-tabs__nav-prev {
        display: none !important;
    }

    .el-tabs__nav-wrap.is-scrollable {
        padding: 0px;
    }

    .el-tabs__item {
        font-size: 14px !important;
    }
}
</style>
    
    